var DatePicker = {
    year:new Date().getFullYear(),
    month:new Date().getMonth()+1,
    day:new Date().getDate(),
    y:null,
    m:null,
    d:null,
    active:null,
    css:`
        <style sw_date_picker>
            .sw_date_picker{   
                border:1px solid #ccc;
                width: 400px;
                font-family: arial;
                font-size: 16px;
                user-select: none;
                padding:0.3em 0.2em;
            }
            .sw_date_picker *{
                margin: 0; 
                padding:0; 
                list-style: none; 
                box-sizing: border-box;    
            }
            .sw_date_picker ul{
                overflow: hidden;
            }
            .sw_date_picker li{
                float: left;
                width: 14.2857%;
                height: 2em;
                line-height: 2em;
                text-align:center;
                transition: 0.1s;
            }
            .__prev:hover,
            .__next:hover,
            .sw_date_days li:hover,
            .sw_date_btns>li>span:hover{
                transition: 0.3s;
                background: #f0f0f0;
                cursor: pointer;
            }
            .sw_date_top{  }
            .sw_date_top li{
                overflow: hidden;
            }
            .sw_date_top li>div{
                float: left;
                height: 100%;
            }
            .sw_date_top input{
                height: 1.6em;
                width: 3em;
                font-size: inherit;
                text-align: center;
                border:none;
            }
            #sw_monthInput{
                width: 2rem;
            }
            .sw_dateSelect_prev{
                display: inline-block;
                width: 0.6em;
                height: 0.6em;
                border:0.1em solid #000;
                border-color: #000 transparent transparent #000;
                transform: translateX(0.16em) rotate(-45deg);
                -webkit-transform: translateX(0.16em) rotate(-45deg);
            }
            .sw_dateSelect_next{
                display: inline-block;
                width: 0.6em;
                height: 0.6em;
                border:0.1em solid #000;
                border-color: #000 transparent transparent #000;
                transform: translateX(-0.16em) rotate(135deg);
                -webkit-transform: translateX(-0.16em) rotate(135deg);
            }
            .sw_date_week li{
                font-weight: bold;
            }
            .sw_date_days{  }
            .sw_date_days li{

            }
            .sw_date_days li.disabled{
                color: #ccc;
            }
            .sw_date_days li.disabled:hover{
                background: none;
                cursor: not-allowed;
            }
            .sw_date_days li.active{
                background: #357ebd;
                color:#fff;
            }
            .sw_date_days li.selected{
                background: #20c997;
            }
            .sw_date_btns{}
            .sw_date_btns>li>span{
                line-height: 1.6em;
                display: inline-block;
                padding: 0.1em 0.8em;
                border-radius: 0.2em;
            }
        </style>
    `,
    html:`
        <div class="sw_date_picker">
            <ul class="sw_date_top">
                <li style="width: 60%">
                   <div style="width:20%" class="__prev"><span class="sw_dateSelect_prev"></span></div> 
                   <div style="width:50%"><input type="tel" id="sw_yearInput">年</div> 
                   <div style="width:20%" class="__next"><span class="sw_dateSelect_next"></span></div> 
                </li>
                <li style="width: 40%">
                   <div style="width:30%" class="__prev"><span class="sw_dateSelect_prev"></span></div>
                   <div style="width:40%"><span id="sw_monthInput">2</span>月</div> 
                   <div style="width:30%" class="__next"><span class="sw_dateSelect_next"></span></div>             
                </li>
            </ul>
            <ul class="sw_date_week">
                <li>日</li>
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li>六</li>
            </ul>
            <ul class="sw_date_days">
                <li></li>
            </ul>
            <ul class="sw_date_btns">
                <li style="width:20%">
                    <span style="color:#aaa;" id="sw_to_cancel">取消</span>
                </li>
                <li style="width:40%">
                    <b id="sw_result"></b>
                </li>
                <li style="width:20%">
                    <span id="sw_to_today">今天</span>
                </li>
                <li style="width:20%">
                    <span id="sw_to_ok">确定</span>
                </li>
            </ul>   
        </div>
    `,
    _getDays:function(y,m,fn){
        var d = new Date(y,m-1,1,0,0,0)
        var t = d.getTime();
        var w = d.getDay();
        for(var i=0;i<w;i++){
            t -= 86400000
        }
        var days = [];
        for(var i=0;i<42;i++){
            days.push(t)
            if(typeof fn == 'function') fn(t,i)
            t += 86400000
        } 
        return days;         
    },
    setHTML:function(){
        var _this = this;
        var html = '';
        this._getDays(this.y, this.m, function(t,i){
            var D = new Date(t);
            var year = D.getFullYear();
            var month = D.getMonth()+1;
            var day = D.getDate();
            var cla = '';
            if((i<8 && day>7)||(i>20 && day<15)){
                cla="disabled"
            }else if(t==_this.active){
                cla="active"
            }
            html += '<li class="'+cla+'" data-v="'+t+'">'+day+'</li>'    
        });

        $(".sw_date_days").html(html).find('li').off().not('.disabled').click(function(){
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
            _this.d = +$(this).text();
            _this.active = $(this).data('v');
            _this.format();
        })  
        $("#sw_yearInput").val(this.y);
        $("#sw_monthInput").text(this.m);   
        _this.format();  
    },
    _toToday(){
        this.y = this.year;
        this.m = this.month;
        this.d = this.day;
        this.active = new Date(this.y,this.m-1,this.d,0,0,0).getTime();
        this.setHTML()
    },
    format:function(sp){
        sp = sp || '-';
        var D = new Date(this.active);
        var y = D.getFullYear();
        var m = D.getMonth()+1;
        var d = D.getDate();
        var result = y+sp+ (m<10?'0'+m:m) +sp+ (d<10?'0'+d:d);
        $("#sw_result").html(result)
        return result;
    },
    getDate(){
        return this.format();
    },
    setDate(y,m,d){
        this.y = y;
        this.m = m;
        this.d = d;
        this.active = new Date(y,m-1,d,0,0,0).getTime();
        this.setHTML();
    },
    init:function(options,callback){
         var _this = this;
        var parent = options.parent || 'body';  //绑定的容器
        var target = options.target;
        if($('style[sw_date_picker]').length==0){
            $('head').append(this.css)
        }
        var div = $('<div></div>');
        div.append(this.html)
        this.el = div.children().hide();
        $(parent).append(this.el);
        $(target).off().click(function(){
            _this.el.fadeIn();
        })

        this._toToday();    //默认今天
        $(".__prev").eq(0).click(function(){
            _this.y --;
            if(_this.y<1900) _this.y = 2200;
            _this.setHTML();
        })
        $(".__prev").eq(1).click(function(){
            _this.m --;
            if(_this.m<1) _this.m = 12;

            console.log(_this.m)
            _this.setHTML();
        })
        $(".__next").eq(0).click(function(){
            _this.y ++;
            if(_this.y>2200) _this.y = 1900;
            _this.setHTML();
        })
        $(".__next").eq(1).click(function(){
            _this.m ++;
            if(_this.m>12) _this.m = 1;
            _this.setHTML();
        })
        $("#sw_yearInput").on('change',function(){
            var v = $.trim($(this).val());
            if(v>1900 && v<2200){
                _this.y = v
            }else{
                _this.y = _this.year
            }
            _this.setHTML();
        })
        //今天
        $("#sw_to_today").click(function(){
            _this._toToday();          
        })
        //取消
        $("#sw_to_cancel").click(function(){
            _this.el.fadeOut(100)       
        })
        //确定
        $("#sw_to_ok").click(function(){
            _this.el.fadeOut(100);
            $(target).html(_this.format());
            $(target).val(_this.format());
            if(callback) callback(_this.format())   
        })
        return this;
    } 
}